<script setup>
import { ref, onMounted, reactive } from 'vue'
import { getOperateRewardsApi, deleteOperateRewardsApi } from '@/api/rewards_punishments'
import { ElMessage } from 'element-plus'
import Page from '@/components/page/Page.vue'
const username = ref('')
const partyA = ref('')
const year = ref(new Date().getFullYear())
const month = ref(new Date().getMonth() + 1)
const tableData = ref([])
const total = ref(0)
const pageNum = ref(1)
const pageSize = ref(10)
const id = ref(0)
const deleletDialog = ref(false)

// 方法区
const pageChange = (size, num) => {
    console.log(size, num)
    pageSize.value = size
    pageNum.value = num
    gettableData()
}
const gettableData = async () => {
    console.log(year.value, month.value)
    const res = await getOperateRewardsApi({
        partyA: partyA.value, username: username.value, year: year.value, month: month.value, pageNum: pageNum.value, pageSize: pageSize.value
    })
    tableData.value = res.data.rows
    total.value = res.data.total
    console.log(res.data)
}

//打开删除对话框
const openDeleteDialog = (userId) => {
    deleletDialog.value = true
    id.value = userId
}

//删除用户请求
const deleletUserRequest = async () => {
    const res = await deleteOperateRewardsApi(id.value)
    res.code == '1' ? ElMessage.success('删除成功') : ElMessage.error('删除失败')
    gettableData()
    deleletDialog.value = false

}


onMounted(async () => {
    gettableData()
})

</script>

<template>
    <div style="padding: 20px;background-color: aliceblue; width: 95%;margin: 0 auto;">
        <div>
            签约方：<el-input v-model="partyA" style="width: 200px;margin-right: 30px;" placeholder="请输入签约方" />
            姓名：<el-input v-model="username" style="width: 200px;margin-right: 30px;" placeholder="请输入姓名" />
            年：<el-input v-model="year" type="number" placeholder="请输入年"
                style="width: 200px;margin-right: 30px;"></el-input>
            月：<el-input v-model="month" type="number" placeholder="请输入月"
                style="width: 200px;margin-right: 30px;"></el-input>
            <el-button type="primary" @click="gettableData">查询</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%;margin-top: 40px;margin-bottom: 40px;height: 550px;">
            <el-table-column prop="partyA" label="签约方" />
            <el-table-column prop="username" label="用户名" />
            <el-table-column prop="contractAmount" label="合同金额" />
            <el-table-column prop="receivedAmount" label="回款金额" />
            <el-table-column prop="sumScore" label="得分" />
            <el-table-column prop="endTime" label="提交时间">
                <template #default="scope">
                    {{ scope.row.endTime.replace('T', ' ') }}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="danger" @click="openDeleteDialog(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
        <Page @change="pageChange" :pageNum="pageNum" :pageSize="pageSize" :total="total" v-if="total > 10" />
    </div>

    <!-- 删除对话框 -->
    <el-dialog v-model="deleletDialog" title="删除此合同信息" width="500">
        <template #footer>
            <el-button @click="deleletDialog = false">取消</el-button>
            <el-button type="primary" @click="deleletUserRequest()">
                确定
            </el-button>
        </template>
    </el-dialog>
</template>

<style lang="less" scoped></style>